import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { API, BASE_PATH } from '@/config'
import GameActions from './components/gameActions'
import GameApp from './components/car'
import requewt from '@/utils/requewt'
import { useCar } from './hooks'
const pageName = "game";
const klassName = pageName.replace(/\./g, '-');
export default ({ category }) => {
    const width = global.innerWidth
    const { menus, car, sprites, setSprites } = useCar(category)
    // const cars = {
    //     '1': {},
    //     '2': {
    //         car: {
    //             image: `${BASE_PATH}/img/game/base_car.png`,
    //             width: 240,
    //             height: 101,
    //             x: width*0.5-120,
    //             y: 46
    //         },
    //         menus: 
    //     }
    // }

    // const [menus, setMenus] = useState(
    //     [
    //         {
    //             label: '贴膜',
    //             type: 'tiemo',
    //             value: 0,
    //             children: [
    //                 {
    //                     image: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     width: 240,
    //                     height: 87,
    //                     x: width*0.5 -120,
    //                     y: 46
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/pink_black_bg.png`,
    //                     width: 240,
    //                     height: 87,
    //                     x: width*0.5 -120,
    //                     y: 46
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/yello_green_bg.png`,
    //                     width: 240,
    //                     height: 87,
    //                     x: width*0.5 -120,
    //                     y: 46
    //                 },

    //             ],
    //             items: [
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/game_icon_1.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '40px',
    //                         height: '40px',
    //                     }
    //                 },
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/game_icon_2.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '40px',
    //                         height: '40px',
    //                     }
    //                 },
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/game_icon_3.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '40px',
    //                         height: '40px',
    //                     }
    //                 },
    //             ]
    //         },
    //         {
    //             label: '尾翼',
    //             type: 'weiyi',
    //             value: 0,
    //             children: [
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-4-v.png`,
    //                     width: 48,
    //                     height: 16,
    //                     x: width*0.5 +76,
    //                     y: 58,
    //                     zIndex: 8

    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-5.png`,
    //                     width: 48,
    //                     height: 16,
    //                     x: width*0.5 +76,
    //                     y: 58,
    //                     zIndex: 8
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-6.png`,
    //                     width: 48,
    //                     height: 16,
    //                     x: width*0.5 +76,
    //                     y: 58,
    //                     zIndex: 8
    //                 },
    //             ],
    //             items: [
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-4.png`,
    //                     value: `${BASE_PATH}/img/game/car-component-4-v.png`,
    //                     style: {
    //                         width: '80%'
    //                     }
    //                 },
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-5.png`,
    //                     value: `${BASE_PATH}/img/game/car-component-5-v.png`,
    //                     style: {
    //                         width: '80%'
    //                     }
    //                 },
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-4.png`,
    //                     value: `${BASE_PATH}/img/game/car-component-6-v.png`,
    //                     style: {
    //                         width: '80%'
    //                     }
    //                 },
    //             ]
    //         },
    //         {
    //             label: '轮毂',
    //             type: 'lungu',
    //             value: 0,
    //             children: [
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-20.png`,
    //                     width: 108,
    //                     height: 44,
    //                     x: width*0.5 + 5,
    //                     y: 100
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-21.png`,
    //                     width: 108,
    //                     height: 44,
    //                     x: width*0.5 + 5,
    //                     y: 100
    //                 }  
    //             ],
    //             items: [
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-7.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '52px'
    //                     }
    //                 },
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-8.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '52px'
    //                     }
    //                 },
    //             ]
    //         },
    //         {
    //             label: '侧镜',
    //             type: 'cejing',
    //             value: 0,
    //             children: [
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-22.png`,
    //                     width: 123,
    //                     height: 15,
    //                     x: width*0.5-62,
    //                     y: 63
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-23.png`,
    //                     width: 123,
    //                     height: 15,
    //                     x: width*0.5-62,
    //                     y: 63
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-24.png`,
    //                     width: 123,
    //                     height: 15,
    //                     x: width*0.5-62,
    //                     y: 63
    //                 },

    //             ],
    //             items: [
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-10.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '52px',
    //                         height: '31px'
    //                     }
    //                 },
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-10.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '52px',
    //                         height: '31px'
    //                     }
    //                 },
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-11.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '50px',
    //                         height: '31px'
    //                     }
    //                 },
    //             ]
    //         },
    //         {
    //             label: '车灯',
    //             type: 'chedeng',
    //             value: 0,
    //             children: [
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-25.png`,
    //                     width: 111,
    //                     height: 20,
    //                     x: width*0.5-114,
    //                     y: 81
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-26.png`,
    //                     width: 111,
    //                     height: 20,
    //                     x: width*0.5-114,
    //                     y: 81
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-27.png`,
    //                     width: 111,
    //                     height: 20,
    //                     x: width*0.5-114,
    //                     y: 81
    //                 },
    //             ],
    //             items: [
    //                         {
    //                             imgUrl: `${BASE_PATH}/img/game/car-component-12.png`,
    //                             value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                             style: {
    //                                 width: '71px',
    //                                 height: '28px'
    //                             }
    //                         },
    //                         {
    //                             imgUrl: `${BASE_PATH}/img/game/car-component-13.png`,
    //                             value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                             style: {
    //                                 width: '71px',
    //                                 height: '28px'
    //                             }
    //                         },
    //                         {
    //                             imgUrl: `${BASE_PATH}/img/game/car-component-14.png`,
    //                             value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                             style: {
    //                                 width: '71px',
    //                                 height: '28px'
    //                             }
    //                         },
    //                     ]
    //         },
    //         {
    //             label: '车贴',
    //             type: 'chetie',
    //             value: 0,
    //             children: [

    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-29.png`,
    //                     width: 240,
    //                     height: 87,
    //                     x: width*0.5 -120,
    //                     y: 46
    //                 },
    //                 {
    //                     image: `${BASE_PATH}/img/game/car-component-28.png`,
    //                     width: 240,
    //                     height: 87,
    //                     x: width*0.5 -120,
    //                     y: 46
    //                 }
    //             ],
    //             items: [
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-16.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '40px',
    //                         height: '40px'
    //                     }
    //                 },
    //                 {
    //                     imgUrl: `${BASE_PATH}/img/game/car-component-17.png`,
    //                     value: `${BASE_PATH}/img/game/blue_pink_bg.png`,
    //                     style: {
    //                         width: '40px',
    //                         height: '40px'
    //                     }
    //                 }
    //             ]
    //         }
    //     ]
    // )

    const spriteChange = (spriteItem, type = 'add') => {
        const result = sprites.slice()
        const index = result.findIndex(i => i.type === spriteItem.type)
        if (index > -1) {
            if (type === 'add') {
                result.splice(index, 1, spriteItem)
            } else {
                console.log('取消')
                result.splice(index, 1)
            }

            // return result
        } else {
            if (type === 'add') {
                result.push(spriteItem)
            }
        }

        setSprites([...result])
        const data = result.map(({ index, type }) => {
            return { type, index }
        })
        const options = {
            method: `POST`,
            headers: { "Content-Type": "multipart/form-data" },
            body: {
                category,
                extra: JSON.stringify(data)
            },
        }
        requewt(API.user.saveDesign, options)
    }
    useEffect(() => {

        if (category) {
            requewt(API.user.design, { body: { category } }).then((result) => {
                try {
                    const { data } = result
                    const initSprite = JSON.parse(data)
                    const tempSrite = []
                    initSprite.forEach(({ type, index }) => {
                        const item = menus.find(e => e.type === type)
                        tempSrite.push({ ...item.children[index], type, index })
                    })
                    setSprites(tempSrite)
                } catch (error) {

                }
            })

        }
    }, [])
    return (
        <div className={`p-${klassName} page page-sec`}>
            <div className="inner">

            </div>
        </div>

    )
}